﻿<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<style type="text/css">
${demo.css}
		</style>
		<script type="text/javascript">
		    function getUrlVars() {
		        var vars = [], hash;
		        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
		        for (var i = 0; i < hashes.length; i++) {
		            hash = hashes[i].split('=');
		            vars.push(hash[0]);
		            vars[hash[0]] = hash[1];
		        }
		        return vars;
		    }

		    $.ajax({
		        type: 'GET',
		        url: '/deviceactive.ashx',
		        data: { type: getUrlVars()["type"] },
		        dataType: 'json',
		        success: function (jsonData) {
		            $(function () {
		                $('#container').highcharts({
		                    title: {
		                        text: 'Monthly Average Temperature',
		                        x: -20 //center
		                    },
		                    subtitle: {
		                        text: 'Source: WorldClimate.com',
		                        x: -20
		                    },
		                    xAxis: {
		                        categories: jsonData[0],
		                        allowDecimals: false
		                    },
		                    yAxis: {
		                        title: {
		                            text: 'Download'
		                        },
		                        plotLines: [{
		                            value: 0,
		                            width: 1,
		                            color: '#808080'
		                        }],
		                        allowDecimals: false
		                    },
		                    tooltip: {
		                        valueSuffix: ''
		                    },
		                    legend: {
		                        layout: 'vertical',
		                        align: 'right',
		                        verticalAlign: 'middle',
		                        borderWidth: 0
		                    },
		                    plotOptions: {
		                        series: {
		                            dataLabels: {
		                                enabled: true
		                            }
		                        }
		                    },
		                    series: [{
		                        name: 'Download',
		                        data: jsonData[1]
		                    }]
		                });
		            });
		        },
		        error: function () {
		            alert('Error loading PatientID');
		        }
		    });

		</script>
</head>
<body>
    <form id="form1" runat="server">
  <script src="/scripts/highcharts/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    </form>
</body>
</html>
